//获取json的方法
function getJsonData(url) {
    var jsonData
    $.ajax({
        async: false,
        url: url,//json文件位置，文件名
        type: "GET",//请求方式为get
        dataType: "json", //返回数据格式为json
        success: function (data) {//请求成功完成后要执行的方法
            //给info赋值给定义好的变量
            jsonData = data
        }
    })
    return jsonData
}

//获取css/js/html方法
function getData(url) {
    var data
    $.ajax({
        url: url,
        async: false,
        success: function (d) {
            data = d
        }
    })
    return data
}

// function change(value) {
//     console.log(getJsonData("./static/data/data.json"))
//     // console.log($("ul li:eq(0) a").addClass('active'))
//     $("#div").load("./html/pages/" + value + ".html");
// }

//创建菜单
function creatMenu(value) {
    value.map(data => {
        var childHtml = ''
        data.child.map(item => {
            childHtml = childHtml + "   <li class=\" bd-sidenav-active\" onclick='changeLiToActive(this)' >\n" +
                "                            <a  href='#' onclick=loadHtml('"+JSON.stringify(item)+"')>\n" +
                "                          " + item.title + "     " +
                "                            </a>\n" +
                "                        </li>"
        })
        var parentHtml = "   <div class=\"bd-toc-item\" onclick='changeToActive(this)'>\n" +
            "                    <a class=\"bd-toc-link\" href='" + data.url + "'>\n" +
            "                        " + data.title + "\n" +
            "                    </a>\n" +
            "   <ul class=\"nav bd-sidenav\">" +
            childHtml +
            "</ul>" +
            "                </div>"
        $("#bd-docs-nav").append(parentHtml)
    })
}
//切换选项
function loadHtml(data){
    data = JSON.parse(data)
    $("#title").html(data.title)
    $("#about").html(data.about)
    $("iframe").attr('src', data.url + '/index.html')
    $("#css").html(getData(data.url+'/style.css'))
    $("#js").html(getData(data.url+'/index.js'))
    $("#html").html(html2Escape(getData(data.url+'/index.html')))
    // setHeight()

}
//左侧一级菜单激活
function changeToActive(e) {
    $('#bd-docs-nav').find('div').removeClass("active")
    e.setAttribute('class', 'active ' + e.classList)
}
function changeLiToActive(e) {
    $('#bd-docs-nav').find('li').removeClass("active")
    e.setAttribute('class', 'active ' + e.classList)
}

//执行入口
$(document).ready(function () {
    $("#header").load("header.html");
    var data = getJsonData("../static/data/data.json")
    creatMenu(data)
    $("#bd-docs-nav").find("div").eq(0).addClass("active")
   $("#bd-docs-nav").find("li").eq(0).addClass("active")
    loadHtml(JSON.stringify(data[0].child[0]))
});

function setHeight(){
    value =$("iframe")[0]
    console.log(value.contentWindow.document.body.scrollHeight)
    value.height = value.contentWindow.document.body.scrollHeight
}

//普通字符转换成转义字符
function html2Escape(sHtml) {
    return sHtml.replace(/[<>&"]/g, function (c) {
        return {'<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;'}[c];
    });
}

//修改css/html/js按钮颜色
function changeColor(e,id) {
    if (!$(e).attr('style')) {
        $("#selectBack").find("button").removeAttr('style')
        console.log(id)
        $('figure').removeClass("show")
        $('#'+id).addClass("show")
        $(e).attr("style", "background-color:#000000")
        $("#selectBack").attr("style", "background-color:" + $(e).css("background-color"))
    }
}
